<template>
  <div class="index_tem page">
    <head-search @areaInfo="getAreaInfo">
      <img v-lazy="logoUrl" slot="location">
      <div class="article_p" slot="search_input" v-text="key_title"></div>
      <div class="blank_div" slot="blank_div"></div>
    </head-search>
    <!-- 轮播图s -->
    <div class="carousel_div">
      <wt-carousel :options="carousel_option">
        <div class="carousel-item" v-for="(item,index) of swiperList" :key="index"><a :href="item.ad_url"><img alt="item.ad_name" :src="item.ad_file"></a></div>
      </wt-carousel>
    </div>
    <!-- 轮播图e -->

    <!-- 分类列表s -->
    <div class="nav_div">
      <div class="nav_one" v-for="item of navList" :key="item.id" @click="goToGoodsList(item)">
        <img v-lazy="item.cate_img">
        <p>{{item.cate_name}}</p>
      </div>
      <div class="nav_one"></div>
      <div class="nav_one"></div>
      <div class="nav_one"></div>
      <div class="nav_one"></div>
    </div>
    <!-- 分类列表e -->
    <!-- 公告模块s -->
    <div class="notice_div" @click="goToNotice">
      <div class="notice_name">公告</div>
      <div class="stright"></div>
      <div class="notice_tag">推荐</div>
      <div class="textBox">
        <wt-notice :notice-list="noticeList"></wt-notice>
      </div>
      <img src="/static/img/index/notice_more.png" alt="">
    </div>
    <!-- 公告模块e -->
    <!-- 推荐专区s -->
    <div class="intro_div">
      <div class="intro_title">
        <span>推荐专区</span>
        <span class="intro_more" @click="goToGoodsList(false)">更多 <img src="/static/img/index/more_arrow.png" alt=""></span>
      </div>
      <div class="intro_list">
        <ul>
          <li v-for="item of hotGoodList" :key="item.id" @click="goToGoodsDetail(item.goods_id)"><img v-lazy="item.goods_img" alt="item.goods_name"></li>
        </ul>
      </div>
    </div>
    <!-- 推荐专区e -->
    <!-- 门店列表s -->
    <div class="content store_div" ref="webview">
      <div class="intro_title"><span>门店列表</span><span class="intro_more" @click="goToStore">更多 <img src="/static/img/index/more_arrow.png" alt=""></span></div>
      <div class="nodata" style="max-height:300px" v-if="dataList.length===0">附近暂无门店</div>
      <van-list v-model="loading" :finished="finished" :finished-text="'没有更多了'" @load="onLoad" :offset="20" :immediate-check="false" v-if="dataList.length>0">
        <template v-for="(item,index) in dataList">
          <div class="list" @click="goDetails(item.id)" :key="index">
            <div class="store_img"><img v-lazy="item.shop_logo" alt=""></div>
            <div class="store_info">
              <p class="store_name">{{item.shop_name}}</p>
              <p class="store_price">促销价:<span>￥{{item.min_price}}</span>&nbsp;起</p>
            </div>
            <div class="store_sat">
              <!-- <p>满意度：</p>
              <p class="store_sat_value">{{item.satisfaction}}%</p> -->
            </div>
          </div>
        </template>
      </van-list>
    </div>
    <!-- 门店列表e -->
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'index',
  data () {
    return {
      carousel_option: {
        auto: true,
        loop: true,
        pagination: false,
        time: 3000
      },
      isActive: 1,
      logoUrl: '/static/img/index/logo.png',
      swiperList: [],
      code: 'index',
      noticeList: [],
      number: 0,
      npage: 1, // 公告页码
      nlimit: 10, // 公告条数
      currentIndex: 0,
      timer: '',
      navList: [],
      navpage: 1, // 热门导航页码
      navlimit: 5, // 热门导航条数
      hotGoodList: [],
      hpage: 1, // 推荐商品页码
      hlimit: 10, //  推荐商品条数
      params: {
        provCode: 0,
        cityCode: 0,
        areaCode: 0,
        lat: 0,
        lng: 0
      },
      dataList: [],
      apiType: 'store',
      apiUrl: 'storeList',
      key_title: ''
    };
  },
  mixins: [mixins],
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  created () {
    this.getSwiperList();
    this.getNoticeList();
    this.getHotList();
    this.getNavList();
  },
  methods: {
    goToGoodsList(item) {
      if (item) this.$router.push({ 'path': '/mall/list', query: { id: item.cate_id } });
      else this.$router.push({ 'path': '/mall' });
    },
    goToGoodsDetail(id) {
      this.$router.push({ 'path': '/mall/goods', query: { id: id } });
    },
    getHotList() {
      let that = this;
      let options = {};
      options.page = that.hpage;
      options.limit = that.hlimit;
      that.$API.home.hotGoodList(options).then(res => {
        if (res.code === 0) {
          that.hotGoodList = res.data;
        }
      });
    },
    getNavList() {
      let that = this;
      let options = {};
      options.page = that.navpage;
      options.limit = that.navlimit;
      that.$API.home.hotCategory(options).then(res => {
        if (res.code === 0) {
          that.navList = res.data;
        }
      });
    },
    goToNotice() {
      this.$router.push({ 'path': '/announcement/list' });
    },
    goDetails (id) {
      this.$router.push({ 'path': '/store/sdetail', query: { id: id } });
    },
    goToStore () {
      this.$router.push({ 'path': '/store' });
    },
    getSwiperList() {
      let that = this;
      let options = {};
      options.code = that.code;
      this.$API.home.swiperList(options).then(res => {
        if (res.code === 0) {
          that.swiperList = res.data;
          that.key_title = res.key_title;
        }
      });
    },
    getNoticeList() {
      let that = this;
      let options = {};
      options.page = that.npage;
      options.limit = that.nlimit;
      that.$API.home.noticeList(options).then(res => {
        if (res.code === 0) {
          that.noticeList = res.data;
          if (that.noticeList.length > 1) {
            that.timer = setInterval(function() {
              that.startMove();
            }, 2000);
          }
        }
      });
    },
    startMove () {
      let that = this;
      that.noticeList.push(that.noticeList.shift());
    },
    getAreaInfo(areaInfo) {
      // console.log(areaInfo);
      this.params.lat = areaInfo.lat;
      this.params.lng = areaInfo.lng;
      this.params.provCode = areaInfo.provCode;
      this.params.cityCode = areaInfo.cityCode;
      this.params.areaCode = areaInfo.areaCode;
      this.getList(this.apiUrl, true);
    }
  }
};
</script>
<style lang="less" scoped>
body{
  overflow-x: auto;
}
::-webkit-scrollbar{
  display: none;
  height:0;
}
.index_tem {
  height:auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .index-top{
    width:100%;
    height:130px;
    display: flex;
    flex-wrap:nowrap;
    .top-location{
      width:21%;
      height:auto;
      text-align: center;
      img{
        width:70px;
      }
      .local-text{
        width:100%;
        height:30px;
        display: flex;
        flex-wrap:nowrap;
        align-items: center;
        color:#343434;
        font-weight: bold;
        font-size: 25px;
        justify-content: space-around;
        padding: 0 15px;
        img{
          width:30px;
        }
        .local_more{
          width:20px;
        }
      }
    }
    .top-message{
      color:#fff;
    }
  }
  .carousel_div{
    padding:20px 30px;
    .carousel-item{
      padding: 0 10px;
    }
  }
  .nav_div{
    width:90%;
    margin:10px auto;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    overflow: hidden;
    .nav_one{
      width:17%;
      height:auto;
      img{
        width:100%;
      }
      p{
        color:#222222;
        font-size: 25px;
        text-align: center;
      }
    }
  }
  .notice_div{
    width:90%;
    margin:10px auto;
    display: flex;
    height:60px;
    align-items: center;
    justify-content: space-between;
    .notice_name{
      color:#FF6E3E;
      font-size: 35px;
      width:13%;
      font-weight: bold;
    }
    .stright{
      width:2px;
      background: #D1CCCC;
      height:100%;
    }
    .textBox{
      height: 100%;
      overflow: hidden;
      width:65%;
    }
    .notice_tag{
      width:10%;
      border-radius: 5px;
      font-size: 25px;
      border:2px solid #02BCF6;
      color:#02BCF6;
      text-align: center;
      height:40px;
      line-height: 40px;
    }
    img{
      width:5%;
    }
  }
  .intro_div{
    width:100%;
    padding:0 20px;
    .intro_list{
      overflow-x:scroll;
      overflow-y: hidden;
      width:100%;
      padding: 10px 0;
      ul{
        float:left;
        display: flex;
        flex-wrap:nowrap;
      }
      li{
        width:230px;
        margin-right: 20px;
      }
      img{
        width:100%;
      }
    }
  }
  .intro_div,.store_div{
    box-sizing: border-box;
    .intro_title{
      width:100%;
      padding-left:35px;
      position: relative;
      height:50px;
      font-size: 33px;
      display: flex;
      color: #343434;
      align-items: center;
      justify-content: space-between;
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translate(0,-50%);
        width: 8px;
        height: 30px;
        border-radius: 30px;
        background: #21BEFF;
      }
      .intro_more{
        margin-right:20px;
        color:#6E6E6E;
        font-size: 25px;
        img{
          color:#6E6E6E;
          font-size: 20px;
          width:20px;
        }
      }
    }
  }
  .store_div{
    padding:0 20px;
  }
  .hd-bar {
    height: 220px;
    color: #fff;
    font-size: 44px;
    padding: 0 43px;
    display: flex;
    align-items: center;
    background: rgba(145, 126, 255, 1);
    box-shadow: 0px -14px 17px 1px rgba(145, 126, 255, 0.36);
    background-image: url('/static/images/icon-announcement-bg.png');
    background-position: 454px bottom;
    background-repeat: no-repeat;
    background-size: 252px 177px;
    .title {
      margin-top: 60px;
    }
  }
  .content {
    box-sizing: border-box;
    flex: 1;
    .list {
      padding: 21px;
      border-bottom: 2px solid #eee;
      position: relative;
      box-shadow:0 0 50px rgba(85, 95, 98, 0.1);
      margin-bottom: 30px;
      border-radius: 20px;
      display: flex;
      flex-wrap:nowrap;
      justify-content: space-between;
      border:1px solid rgba(85, 95, 98, 0.1);
      .store_img,.store_sat{
        width:25%;
      }
      .store_info{
        width:45%;
        display: flex;
        flex-wrap:wrap;
        align-content: center;
        font-size: 35px;
        .store_name{
          color:#343434;
          font-weight: bold;
          width: 100%;
        }
        .store_price{
          color:#4D4D4D;
          font-size: 25px;
          margin-top: 20px;
          span{
            color:#FF911A;
            font-weight: bold;
            font-size: 40px;
          }
        }
      }
      .store_sat{
        display: flex;
        flex-wrap:wrap;
        align-content: center;
        text-align: center;
        p:first-child{
          color:#343434;
          font-size: 25px;
          width: 100%;
        }
        .store_sat_value{
          width: 100%;
          color:#FF8400;
          font-size: 50px;
          font-weight: bold;
          margin-top: 20px;
        }
      }
    }
    .list.active {
      &::before {
        background-color: #917eff;
      }
    }
  }
}
</style>
